Hace tiempo veíamos la forma de añadir texto sobre una imagen, al parecer el tema no quedó demasiado claro respecto como por ejemplo estilos para la fuente del texto o posicionar ese texto a nuestro antojo.
Lorem Ipsum is simply dummy text of the printing and typesetting industry..
Lorem Ipsum has been the industry's standard dummy text...
Lorem Ipsum has been the industry's standard dummy text...
Para el ejemplo añadimos lo siguiente:
<div style="float: left; position: relative;">
<img alt="texto-imagen" src="url de la imagen" />
<div style="color: black; font-family: Courier; left: 20px; position: absolute; top: 55px; width: 150px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry..
Lorem Ipsum has been the industry's standard dummy text...
</div>
</div>
Y entendemos lo que añadimos.
-Subimos la imagen al editor de entradas, en la pestaña de Edición de HTML copiamos la url de la imagen y la añadimos donde dice "url de la imagen"
-Con la propiedad float estamos adaptando el texto respecto al fondo, al escoger left lo adaptamos a la izquierda, si fuera a la derecha sería right.
-En la propiedad position escogemos absolute para ubicar el texto en un lugar concreto.
-En style="color: black; font-family: Courier; es el sitio que podemos añadir estilos para la fuente siempre separados por por punto y coma ";"
-En la misma línea de los estilos de fuente añadimos el espacio de separación del extremo ya sea izquierdo (left) o derecho ( right) indicando los pixels (left: 20px; para el ejemplo)
-Al igual que dimos un espacio de separación a los extremos lo hacemos del borde superior top: 55px; si el texto cubre todo el espacio de alto de la imagen añadimos espacio inferior con bottom: xx;
-Decidimos también el ancho que medirá el texto, lo haremos añadiendo width: 150px a más o menos anchura para el texto modificamos el valor de 150px
de regreso piedra preciosa :)...no recordaba lo que nos cuentas, si me lo pruebo en algún blog para jugar un rato...besos
Gema eres una diva, me has ayudado a eliminar las líneas tan feas que tenía mi blog. Gracias
No me sale con el subrayado, pero no paa nada, no hay nada peor que las líneas
un saludo
yz Hola Graciela me alegra verte de nuevo :D
yz Bubu el subrayado míralo en body donde dice
a:hover {
color:#808080;
text-decoration:underline;
Cambia underline por none ;)
A experimentar con esto :-)
Hola Gem@ muy bueno esto que nos traes, pero lo que me trae a mi es otra cosa que me intriga mucho, desde ayer en FolkTango las fuentes salen muuuuy grandes, solas, yo no he tocado nada, sale todo muy feo se despatarra todo con esa fuente grande, que te parece que pudo haber pasado? Juro que no toqué nada, solo pasé a mirarlo (ni siquiera publiqué) y me encontré con todo desfigurado :O
Lo dejé para verlo hoy a ver si era algo de los "chicos" de Blogger, pero, no (no se) está todo igual que ayer, que será :o
Besotes ;)
yz Todo tuyo Bonzu :D
yz k_nelita mira en outer-wrapper que tienes añadido: "font: normal normal 100% Verdana, sans-serif;" ese 100% esos estilos de la fuente del blog si es para todo el blog la misma fuente yo lo pondría en body. ¿font-size: 16px por ejemplo?
Ya me fijo gem@, pero como se desconfiguró solo es lo que no entiendo :o
Ahora te digo que tengo :S
Hay mi Dios!! Que tonta soy!! Ayer le puse una meta etiqueta justo debajo de head, arriba de todo y me la deformaba Blogger y no me validaban el blog en un sitio de publi, entonces la puse justo antes de Variable definitions, ahora al abrir la plantilla lo primero que vi fue eso y la quité y quedó todo como estaba, perdona que te hiciera perder el tiempo, pero una ni me acordaba de eso y otra nunca pensé que fuera a hacer ese efecto nefasto :o
Yo decía como pasó esto solo?? Que bobaaaaa!!!!
Mil gracias por fijarte ;)
yz De todas formas no sé como tienes los estilos de fuente en outer-wrapper, pero si te va bien ya sabes... ni tocarlo :D
te leo todos lo dias
un saludo
yz Gracias Lic.Daniel :)
Hola Gem@!
Estupenda página, me ha ayudado mucho para el rediseño de mi blog (aún en proceso). Yo quería utilizar texto sobre la imagen de la cabecera, para poner frases aleatorias, pero si utilizo el javascript para que cambien las frases no aparece texto...
Un saludo!
:: No entiendo bien lo que tratas de hacer ¿lo tienes añadido en alguna parte?
Nota: solo los miembros de este blog pueden publicar comentarios.